<!DOCTYPE html>
{% load static%}
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:data-index="http://www.w3.org/1999/xhtml">

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>入侵统计</title>

    <link rel="stylesheet" href="/media/css/bootstrap-off-canvas-nav.css">
    <link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.4/css/bootstrap.min.css">
    <script src="http://cdn.bootcss.com/jquery/1.11.2/jquery.min.js"></script>
    <script src="http://cdn.bootcss.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
    <script src="/static/js/bootstrap-off-canvas-nav.js"></script>
    <link href="/media/css/bootstrap-datetimepicker.min.css" rel="stylesheet">
    <script type="text/javascript" src="/static/js/bootstrap-datetimepicker.min.js"></script>
    <script type="text/javascript" src="/static/ js/locales/bootstrap-datetimepicker.zh-CN.js"></script>
	<link rel="stylesheet" href="/media/video/style1.css">
	<link rel="stylesheet" href="/media/video/style.css">
	 <link rel="stylesheet" href="/media/video/style2.css">
	 <link rel="stylesheet" href="/media/back/back.css">

    <style>
        .font-type {
            color: white;
        }

        .position1 {
            position: relative;
            float: left;
            width: 20%;
            height: 50px;
            text-align: center;
            line-height: 50px;
        }

        @import "https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css";

        body {
            position: relative;
            overflow-x: hidden;
        }

        body,
        html {
            height: 100%;
            background-color: white;
        }

        .nav .open>a {
            background-color: transparent;
        }

        .nav .open>a:hover {
            background-color: transparent;
        }

        .nav .open>a:focus {
            background-color: transparent;
        }

        /*-------------------------------*/
        /*           Wrappers            */
        /*-------------------------------*/
        #wrapper {
            height: 0px;
            -moz-transition: all 0.5s ease;
            -o-transition: all 0.5s ease;
            -webkit-transition: all 0.5s ease;
            padding-left: 0;
            transition: all 0.5s ease;
        }

        #wrapper.toggled {
            padding-left: 220px;
        }

        #wrapper.toggled #sidebar-wrapper {
            width: 220px;
        }

        #wrapper.toggled #page-content-wrapper {
            margin-right: -220px;
            position: absolute;
        }

        #sidebar-wrapper {
            -moz-transition: all 0.5s ease;
            -o-transition: all 0.5s ease;
            -webkit-transition: all 0.5s ease;
            background: #1a1a1a;
            height: 100%;
            left: 220px;
            margin-left: -220px;
            overflow-x: hidden;
            overflow-y: auto;
            transition: all 0.5s ease;
            width: 0;
            z-index: 1000;
        }

        #sidebar-wrapper::-webkit-scrollbar {
            display: none;
        }

        #page-content-wrapper {
            padding-top: 70px;
            width: 100%;
        }


        /*-------------------------------*/
        /*       Hamburger-Cross         */
        /*-------------------------------*/
        .hamburger {
            background: black;
            border: none;
            display: block;
            height: 32px;
            margin-left: 15px;
            position: fixed;
            top: 20px;
            width: 32px;
            z-index: 999;
        }

        .hamburger:hover {
            outline: none;
        }

        .hamburger:focus {
            outline: none;
        }

        .hamburger:active {
            outline: none;
        }

        .hamburger.is-closed:before {
            -webkit-transform: translate3d(0, 0, 0);
            -webkit-transition: all 0.35s ease-in-out;
            color: #ffffff;
            content: '';
            display: block;
            font-size: 14px;
            line-height: 32px;
            opacity: 0;
            text-align: center;
            width: 100px;
        }

        .hamburger.is-closed:hover before {
            -webkit-transform: translate3d(-100px, 0, 0);
            -webkit-transition: all 0.35s ease-in-out;
            display: block;
            opacity: 1;
        }

        .hamburger.is-closed:hover .hamb-top {
            -webkit-transition: all 0.35s ease-in-out;
            top: 0;
        }

        .hamburger.is-closed:hover .hamb-bottom {
            -webkit-transition: all 0.35s ease-in-out;
            bottom: 0;
        }

        .hamburger.is-closed .hamb-top {
            -webkit-transition: all 0.35s ease-in-out;
            background-color: rgba(255, 255, 255, 0.7);
            top: 5px;
        }

        .hamburger.is-closed .hamb-middle {
            background-color: rgba(255, 255, 255, 0.7);
            margin-top: -2px;
            top: 50%;
        }

        .hamburger.is-closed .hamb-bottom {
            -webkit-transition: all 0.35s ease-in-out;
            background-color: rgba(255, 255, 255, 0.7);
            bottom: 5px;
        }

        .hamburger.is-closed .hamb-top,
        .hamburger.is-closed .hamb-middle,
        .hamburger.is-closed .hamb-bottom,
        .hamburger.is-open .hamb-top,
        .hamburger.is-open .hamb-middle,
        .hamburger.is-open .hamb-bottom {
            height: 4px;
            left: 0;
            position: absolute;
            width: 100%;
        }

        .hamburger.is-open .hamb-top {
            -webkit-transform: rotate(45deg);
            -webkit-transition: -webkit-transform 0.2s cubic-bezier(0.73, 1, 0.28, 0.08);
            background-color: #ffffff;
            margin-top: -2px;
            top: 50%;
        }

        .hamburger.is-open .hamb-middle {
            background-color: #ffffff;
            display: none;
        }

        .hamburger.is-open .hamb-bottom {
            -webkit-transform: rotate(-45deg);
            -webkit-transition: -webkit-transform 0.2s cubic-bezier(0.73, 1, 0.28, 0.08);
            background-color: #ffffff;
            margin-top: -2px;
            top: 50%;
        }

        .hamburger.is-open:before {
            -webkit-transform: translate3d(0, 0, 0);
            -webkit-transition: all 0.35s ease-in-out;
            color: #ffffff;
            content: '';
            display: block;
            font-size: 14px;
            line-height: 32px;
            opacity: 0;
            text-align: center;
            width: 100px;
        }

        .hamburger.is-open:hover before {
            -webkit-transform: translate3d(-100px, 0, 0);
            -webkit-transition: all 0.35s ease-in-out;
            display: block;
            opacity: 1;
        }

        /*-------------------------------*/
        /*          Dark Overlay         */
        /*-------------------------------*/
        .overlay {
            position: fixed;
            display: none;
            width: 100%;
            height: 100%;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background-color: rgba(0, 0, 0, 0.4);
            z-index: 1;
        }

        .top_div {
            background-color: #25304c;
            padding-top: 10px;
        }


        #main {
            height: 100%;
            background-color: #1e2233;
            overflow: hidden;
            position: relative;
        }

        .content_div {
            height: 98%;
            background-color: #1e2233;
            padding: 0px 18px;
        }

        #left_div {
            float: left;
            width: 78%;
            height: 92%;
            background-color: #1e2233;
        }

        #right_div {
            float: left;
            width: 20.4%;
            height: 95%;
            margin-left: 23px;
            background-color: #1f273e;
        }

        #monitorcontrol_content_div {
            margin: 10px 10px;
            height: 95%;
            /* border: 1px ridge #222943; */
            box-shadow: -3px 3px 10px 10px rgba(0, 0, 0, 0.4);
            border-radius: 10px;
            background-color: #1e2233;
        }

        #monitorcontrol_content_div li {
            padding: 20px 0;
            font-size: 16px;
            color: #fff;
            font-family: Georgia, 'Times New Roman', Times, serif;
            cursor: pointer;
        }

        #monitorcontrol_content_div li:hover {
            color: #62b8f5;
            /* background-color: #402d5c; */
        }

        #monitorcontrol_content_top_div {

            height: 30px;
            background-color: #1e2233;
            text-align: center;
            font-size: 20px;
            color: #ffffff;
            border-radius: 10px 10px 0px 0px;
        }


        #monitorControl1_div {
            position: relative;
            margin-left: 10px;
            width: 21%;
            height: 600px;
            float: left;
            background-color: #27304c;
        }

        .monitorcontrol-bottom-div {
            position: absolute;
            top: 480px;
            width: 280px;
            height: 250px;
            background-color: #222943;
        }

        .left_top_div {
            height: 70px;
            font-size: 20px;
            font-family: 'Times New Roman', Times, serif;
            line-height: 70px;
        }

        .mybtn {
            padding: 5px 50px;
        }

        #record-table thead {
            color: #748ec8;
        }

        #record-table td {
            border: 0;
            color: #fff;
        }

        #record-table tr:hover {
            background-color: #38466b;
        }

        #left_div input {
            border: 0;
            content: '年月日';
        }

        .color-div {
            background-color: #1e2233;
        }

        .left_top_div li {
            text-align: center;
        }

        .overlap-div {}


        .t-div {
            color: #fff;
            padding: 10px;
            font-size: 15px;
            background-color: #465483;
        }

        .rt-statistic-div {
            position: relative;
            margin-top: 5px;
            margin-bottom: 25px;
            height: 200px;
            background-color: #292c39;
            /* rgba(0, 0, 0, .4) */
        }

        .text-div {
            position: absolute;
            top: 40px;
            left: 30px;
            width: 130px;
            height: 130px;
            background-color: #292c39;
        }

        .img-div {
            position: absolute;
            top: 40px;
            left: 200px;
            width: 150px;
            height: 100px;
            background-color: #fff;
        }

        .top-span {
            position: absolute;
            background-color: #292c39;
            top: 20px;
            left: 15px;
            width: 120px;
            height: 50px;
            color: #fff;
            font-weight: 20px;
            font-size: 30px;
        }

        .bottom-span {
            position: absolute;
            background-color: #292c39;
            top: 60px;
            left: 15px;
            width: 120px;
            height: 50px;

            color: #fff;
        }

        .dark-matter {

            /* margin-left: auto; */

            /* margin-right: auto; */

            /* max-width: 500px; */

            background: #555;

            /* padding: 20px 30px 20px 30px; */

            font: 12px "Helvetica Neue", Helvetica, Arial, sans-serif;

            color: #D3D3D3;

            text-shadow: 1px 1px 1px #444;

            /* border: none; */
            /* border-radius: 5px; */

            /* -webkit-border-radius: 5px; */

            /* -moz-border-radius: 5px; */

        }

        .dark-matter form {
            width: 100%;
        }

        .dark-matter h1 {

            padding: 0px 0px 10px 40px;

            display: block;

            border-bottom: 1px solid #444;

            margin: -10px -30px 30px -30px;

        }

        .dark-matter h1>span {

            display: block;

            font-size: 11px;

        }

        .dark-matter label {

            display: block;

            margin: 0px 0px 5px;

        }

        .dark-matter label>span {

            float: left;

            width: 20%;

            text-align: right;

            padding-right: 10px;

            margin-top: 10px;

            font-weight: bold;

        }

        .dark-matter input[type="text"],
        .dark-matter input[type="email"],
        .dark-matter textarea,
        .dark-matter select {

            border: none;

            color: #525252;

            height: 25px;

            line-height: 15px;

            margin-bottom: 16px;

            margin-right: 6px;

            margin-top: 2px;

            outline: 0 none;

            padding: 5px 0px 5px 5px;

            width: 70%;

            border-radius: 2px;

            -webkit-border-radius: 2px;

            -moz-border-radius: 2px;

            -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);

            background: #DFDFDF;

        }

        .dark-matter select {

            background: #DFDFDF url('/static/down2.png') no-repeat right;

            appearance: none;

            -webkit-appearance: none;

            -moz-appearance: none;

            text-indent: 0.01px;

            text-overflow: '';

            width: 70%;

            height: 35px;

            color: #525252;

            line-height: 25px;

        }

        .dark-matter textarea {

            height: 100px;

            padding: 5px 0px 0px 5px;

            width: 70%;

        }

        .dark-matter .button {
            margin: 10px 100px;
            background: #FFCC02;

            border: none;

            padding: 10px 70px 10px 70px;

            color: #585858;

            border-radius: 4px;

            -moz-border-radius: 4px;

            -webkit-border-radius: 4px;

            text-shadow: 1px 1px 1px #FFE477;

            font-weight: bold;

            box-shadow: 1px 1px 1px #3D3D3D;

            -webkit-box-shadow: 1px 1px 1px #3D3D3D;

            -moz-box-shadow: 1px 1px 1px #3D3D3D;

        }

        .dark-matter .button:hover {

            color: #333;

            background-color: #EBEBEB;

        }


    </style>
</head>

<body id="sbody">

<!-- 模态框 -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header dark-matter">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                        aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" id="myModalLabel">新人信息录入</h4>
                <span>录入照片</span>
            </div>
            <div class="modal-body" style="padding: 0px;">
                <form enctype="multipart/form-data" action="{% url 'trustedStaffForm' %}" method="post"
                      class="dark-matter" id="trustForm">
                    {%csrf_token %}
                    <label>
                        <span>姓名 :</span>
                        <input id="name" type="text" name="name" placeholder="姓名"/>
                    </label>

                    <label>

                        <span>年龄:</span>

                        <input id="age" type="text" name="age" placeholder="年龄"/>

                    </label>

                    <label>
                        <span>性别:</span>
                        <select name="selection">
                            <option value="man">男</option>
                            <option value="woman">女</option>
                        </select>
                    </label>
                    <label>
                        <span>邮箱 :</span>
                        <input id="email" type="email" name="email" placeholder="有效的邮箱地址"/>
                    </label>

                    <label>
                        <span>人脸照片 :</span>
                        <img id="image-preview" width="200" height="200">
                        <input style="margin-left:170px;" type="file" id="file" name="upload_image"
                               accept="image/gif, image/jpeg, image/png, image/jpg">
                    </label>
                    <!--                        <label style="margin-bottom: 0;">-->
                    <!--                            <span>&nbsp;</span>-->
                    <!--                            <input type="button" class="button" value="Send" />-->
                    <!--                        </label>-->
                </form>
            </div>
            <div class="modal-footer" style="background-color: #555555;">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                <button type="button" class="btn btn-primary" onclick=mySubmit('trustForm')>提交</button>
            </div>
        </div>
    </div>
</div>


<!-- 侧滑菜单 -->
<div class="menuToggle"></div>
  <div class="sidebar">
    <ul>
      <li class="logo" style="--bg: #333;">
        <a href="">
          <div class="icon"><img style="width: 80px;" src="../media/back/gas.png" alt="Gas Station Icon"></div>
          <div class="text">智慧加油站</div>
        </a>
      </li>
      <div class="menu-list">
     <!--   <li style="--bg:#f44336;" class="active">
          <a href="#">
            <div class="icon"><ion-icon name="home-outline"></ion-icon></div>
            <div class="text">首页</div>
          </a>
        </li> -->
              <!-- <li><a href="{% url 'gly-rt-monitor' %}">实时监控</a> </li>
                        <li><a href="{% url 'record' %}"> 查看入侵记录 </a></li>
                          <li><a href="{%url 'vedioPage' %}"> 查看视频 </a></li>
                        <li> <a href="{% url 'statistic' %}"> 入侵统计</a></li> -->
        <li style="--bg:darkblue;">
         <a href="{% url 'gly-rt-monitor' %}">
            <div class="icon"><ion-icon name="eye-outline"></ion-icon></div>
            <div class="text">实时监控</div>
          </a>
        </li>

        <li style="--bg:springgreen;">
         <a href="{% url 'record' %}">
            <div class="icon"><ion-icon name="warning-outline"></ion-icon></div>
            <div class="text">查看入侵</div>
          </a>
        </li>

<!--        <li style="&#45;&#45;bg:#ffa117;" >-->
<!--          <a href="{%url 'vedioPage' %}">-->
<!--            <div class="icon"><ion-icon name="videocam-outline"></ion-icon></div>-->
<!--            <div class="text">查看视频</div>-->
<!--          </a>-->
<!--        </li>-->

        <li style="--bg:GREY;"class="active">
         <a href="{% url 'statistic' %}">
            <div class="icon"><ion-icon name="analytics-outline" class="active"></ion-icon></div>
            <div class="text">入侵统计</div>
          </a>
        </li>

<!--        <li style="&#45;&#45;bg:purple;" >-->
<!--        <a href="#" data-toggle="modal" data-target="#myModal">-->
<!--            <div class="icon"><ion-icon name="person-outline"></ion-icon></div>-->
<!--            <div class="text">行人信息导入</div>-->
<!--          </a>-->
<!--        </li>-->
{% if status > 0 %}
		<li style="--bg:#ffa117;" >
		  <a href="{% url 'infoManager' %}">
		    <div class="icon"><ion-icon name="document-outline"></ion-icon></div>
		    <div class="text">信息管理</div>
		  </a>
		</li>
		  {% endif %}
<!--		<li style="&#45;&#45;bg:#333;">-->
<!--		  <a href="{% url 'setMonitorPage' %}">-->
<!--		    <div class="icon"><ion-icon name="settings-outline"></ion-icon></div>-->
<!--		    <div class="text">监控区域设置</div>-->
<!--		  </a>-->
<!--		</li>-->
      </div>
	  <div class="bottom">
	    <li style="--bg:#333;">
	      <a href="#">
	        <div class="icon">
	          <div class="imgBx">
	            <img src="../media/video/images/user.jpg" alt="user">
	          </div>
	        </div>
	        <div class="text">manager</div>
	      </a>
	    </li>

	    <li style="--bg:#333;">
	      <a href="{% url 'login'%}">
	        <div class="icon"><ion-icon name="log-out-outline"></ion-icon></div>
	        <div class="text">退出</div>
	      </a>
	    </li>

	  </div>
    </ul>

  </div>
  <style>
	  .container {
	             width: 1300px;
	             height: 750px;
	             margin: auto;
	             border: 1px solid white;
	             padding: 20px;
	             box-sizing: border-box;
	             outline: 1px solid white;
	             position: relative;
	             top: 20px;
	             left: 50px;
	             font-family: Arial, sans-serif;
	             overflow: auto;
	         }
  </style>
<div  class="container" style="background-color: rgba(200, 200, 200, 0.5); /* 设置浅灰色透明背景 */">
	<div style="margin-top: -1%;">
		<!-- <div class="row" style="background-color: black">
		    <div class="col-md-5" style="padding: 0px 30px;">
		        <span style="color: #6489d0; margin: 0px 20px;">日期</span>
		        <input type="text" style="display: inline-block; width: 160px; margin: 10px 0px;"
		            class="form-control form_datetime" id="startTime" name="addtime" placeholder="开始时间">
		        <span style="color: #6489d0; margin: 0px 10px">至</span>
		        <input type="text" style="display: inline-block; width: 160px; margin: 10px 0px;"
		            class="form-control form_datetime" id="endTime" name="addtime" placeholder="结束时间">
		    </div>
			<div class="col-md-2 ">
			    <div >
			    		    <ul class="camera-list"">
			    		        <div style="background-color: black;"><strong>宿舍监控点</strong></div>
			    				<li><span class="glyphicon glyphicon-camera"></span> 摄像头1</li>
			    		        <li><span class="glyphicon glyphicon-camera"></span> 摄像头2</li>
			    		        <li><span class="glyphicon glyphicon-camera"></span> 摄像头3</li>
			    		        <li><span class="glyphicon glyphicon-camera"></span> 摄像头4</li>
			    		    </ul>
			    		</div>
			</div> -->
		<div class="row" style="color: white;" style="background-color:#333333;">

			<div class="col-md-1 col-md-offset-1"><div >
			<strong>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
			&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;

			加</strong>
			<br />
			<strong>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
			&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;油</strong>
			<br />
			<strong>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
			&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;站</strong>
			<br />
			<strong>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
			&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;监</strong>
			<br />
			<strong>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
			&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;控</strong>
				<br/>
				<strong>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
			&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;点</strong>

			</div>

			</div>
			<div class="col-md-2 " style="margin-top: 1%;" >

				<ul class="list-unstyled">

				    <li data-index="1"><span class="glyphicon glyphicon-camera"></span> 加油站入口</li>
				    <li data-index="2"><span class="glyphicon glyphicon-camera"></span> 加油站出口</li>
				    <li data-index="3"><span class="glyphicon glyphicon-camera"></span> 加油机</li>
				    <li data-index="4"><span class="glyphicon glyphicon-camera"></span> 危险区域</li>
				</ul>

			</div>


			<div class="col-md-2 col-md-offset-1"style = "margin-top: 2.5%;">

				    <a class="btn btn-primary" href="#div1" role="tab" data-toggle="tab">每日统计</a>
				    <a class="btn btn-success" href="#div2" role="tab" data-toggle="tab">每月统计</a>

			</div>
		 	<div class="col-md-2 col-md-offset-1"  >


				   <div class="center" style="border-right-color: #333; font-size: 20px;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;日期设置</div>
				    <div class="center" >
				        <input type="date" style="background-color: black;color: #6b7da3; width: 150px;"><br>

				    </div>
					</div>
					<div class="col-md-1">
						<button type="botton" class="btn btn-info"
						         style="margin:30px -50px;padding:5px 5px">查询
						 </button>
					</div>

		</div>

<!-- 图像 -->
<div class="tab-content"id="statDiv"  style="background-color:#333333; border: 1px solid #fff;" /* 设置白色边框 */">
	            <div role="tabpanel" class="tab-pane active" id="div1"
	                 style="background-color: #292c39; height: 382px;">
	                <div class="box1" style="height: 300px; " data-index="1">
	                </div>
	                <div class="box2" style="width:1157px; height: 300px; display:none;" data-index="2">
	                </div>
	                <div class="box3" style="width:1157px; height: 300px;display:none;" data-index="3">

	                </div>
	                <div class="box4" style="width:1157px; height: 300px;display:none;" data-index="4">

	                </div>
	            </div>
	            <div role="tabpanel" class="tab-pane" id="div2" style="background-color: #292c39; height: 382px;">
	                <div class="monthBox2">
	                    <div class="box5" style=" width:1157px;height: 300px; " data-index="1">

	                    </div>
	                    <div class="box6" style=" width:1157px;height: 300px; display:none;" data-index="2">

	                    </div>
	                    <div class="box7" style="width:1157px; height: 300px;display:none;" data-index="3">

	                    </div>
	                    <div class="box8" style="width:1157px;height: 300px;display:none;" data-index="4">

	                    </div>
	                </div>
	            </div>
	        </div>




	    </div>

	<div class="container-fluid">
	    <div class="row">
	        <div class="col-md-4" style="color: #fff;">
	            <span style="margin-left:90px;">实时数据</span>
	            <span style="margin-left:50px; color:white;" id="dateTime"></span>
	        </div>

	    </div>
	    <div class="row" >
	        <div class="col-md-offset-1 col-md-4 rt-statistic-div" style="  border: 1px solid #fff; /* 设置白色边框 */" >
	            <div class="text-div">
	                    <span class="top-span" id="numSpan">
	                        2265
	                    </span>
	                <span class="bottom-span" >
	                        <h5>今日警报总数</h5>
	                        <span style="font-size: 8px;" id="numRatio"> 比昨日同期:22% <img src="/statics/images/up.png"></span>
	                    </span>
	            </div>

	            <div class="img-div">
	                <img src="/media/images/bg1.png" alt="">
	            </div>
	        </div>
	        <div class="col-md-offset-2 col-md-4 rt-statistic-div"style="  border: 1px solid #fff; /* 设置白色边框 */">
	            <div class="text-div">
	                    <span class="top-span" id="numMonth">
	                        2265
	                    </span>
	                <span class="bottom-span">
	                        <h5>当前月份警报总数</h5>
	                        <span style="font-size: 8px;" id="numMonthRatio"> 比昨日同期:22% <img src="/statics/images/down.png"></span>
	                    </span>
	            </div>

	            <div class="img-div">
	                <img src="/media/images/bg1.png" alt="">
	            </div>
	        </div>
	    </div>
	</div>

</div>

<form  enctype="multipart/form-data" action="{% url 'statistic' %}" method="get" id="rtform">
</form>
</body>

<script src="/static/js/echarts.min.js"></script>
<script>

setInterval(
   function(){
       var xhr=new XMLHttpRequest();
       xhr.open('get','/intrusionDect/getRTData',true);
       xhr.send();
       xhr.onload=function(){
           var text=xhr.responseText;

           var responseText=JSON.parse(text);
           console.log(responseText);
           var numSpan=document.getElementById('numSpan');
           var numRatio=document.getElementById('numRatio');
           numSpan.innerHTML=responseText.num;
           console.log(responseText.existNumRatio);
           if(responseText.existNumRatio){
               if (responseText.numRatio >= 0){
                   numRatio.innerHTML=' 比昨日同期增加:'+(Math.round(responseText.numRatio*10000))/100+'%'
                }else{
                   numRatio.innerHTML=' 比昨日同期减小:'+(Math.round((-responseText.numRatio)*10000))/100+'%'
               }
           }else{
                numRatio.innerHTML=' 比昨日同期:none'
           }

           var numMonth=document.getElementById('numMonth');
           var numMonthRatio=document.getElementById('numMonthRatio');
           numMonth.innerHTML=responseText.numMonth;
           if(responseText.existNumMonthRatio){
               if (responseText.numMonthRatio >= 0){
                   numMonthRatio.innerHTML=' 比上个月同期增加:'+(Math.round(responseText.numMonthRatio*10000))/100+'%'
                }else{
                   numMonthRatio.innerHTML=' 比上个月同期减小:'+(Math.round((-responseText.numMonthRatio)*10000))/100+'%'
               }
           }else{
                numMonthRatio.innerHTML=' 比上个月同期:none'
           }

       }
   }, 1000);





    setInterval("document.getElementById('dateTime').innerHTML=new Date().toLocaleString();", 1000);


<!--    setInterval(function(){-->
<!--        var body=document.querySelector('#sbody');-->
<!--        var form=document.querySelector('#rtform');-->
<!--        body.append(form);-->
<!--        form.submit();-->
<!--    }, 3000);-->



    let fileInput = document.getElementById('file');
    let info = document.getElementById('info');
    let preview = document.getElementById('image-preview');
    // 监听change事件:
    fileInput.addEventListener('change', function () {
        // 清除背景图片:
        preview.style.backgroundImage = '';
        if (!fileInput.value) {
            info.innerHTML = '没有选择文件';
            return;
        }
        let file = fileInput.files[0];
        let size = file.size;
        if (!['image/jpeg', 'image/png', 'image/gif', 'image/jpg'].includes(file.type)) {
            alert('不是有效的图片文件!');
            return;
        }
        // 读取文件:
        let reader = new FileReader();
        reader.onload = function (e) {
            let data = e.target.result;
            console.log(preview, 'a标签')
            preview.src = data
        };
        // 以DataURL的形式读取文件:
        reader.readAsDataURL(file);
    });

    var liss=document.querySelectorAll('.list-unstyled li');
    var monthDivs=document.querySelectorAll('.monthBox2 div');
    var divs=document.querySelectorAll('#div1 div');
    for (var i=0;i < liss.length;i++){
        liss[i].onclick=function(){
               for (var j = 0;j < liss.length;j++){
                    if(divs[j].getAttribute('data-index')==this.getAttribute('data-index')){
                        divs[j].style.display='block';
                    }else{
                        divs[j].style.display='none';
                    }
               }

               for (var k = 0;k < liss.length;k++){
                    if(monthDivs[k].getAttribute('data-index')==this.getAttribute('data-index')){
                        monthDivs[k].style.display='block';
                    }else{
                        monthDivs[k].style.display='none';
                    }
               }
        }
    }

    function mySubmit(formId){
        var form=document.getElementById(formId);
        form.submit();
    }


   var myChart2 = echarts.init(document.querySelector('.box2'));
   var option2 = {
        xAxis: {
            data: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12', '13', '14', '15', '16',
            '17', '18', '19','20','21','22','23']
        },
        yAxis: {},
        series: [
        {
            data: {{ dataList2 }},
            type: 'line',
            smooth: true
        }
        ]
        };
    // 使用刚指定的配置项和数据显示图表。
    myChart2.setOption(option2);



    var myChart1 = echarts.init(document.querySelector('.box1'));
    var option = {
        xAxis: {
            data: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12', '13', '14', '15', '16',
            '17', '18', '19','20','21','22','23']
        },
        yAxis: {},
        series: [
        {
            data: {{dataList1}},
            type: 'line',
            smooth: true
        }
        ]
        };
    // 使用刚指定的配置项和数据显示图表。
    myChart1.setOption(option);

    var myChart3 = echarts.init(document.querySelector('.box3'));
    var option = {
        xAxis: {
            data: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12', '13', '14', '15', '16',
            '17', '18', '19','20','21','22','23']
        },
        yAxis: {},
        series: [
        {
            data: {{dataList3}},
            type: 'line',
            smooth: true
        }
        ]
        };
    // 使用刚指定的配置项和数据显示图表。
    myChart3.setOption(option);



    var myChart4 = echarts.init(document.querySelector('.box4'));
    var option = {
        xAxis: {
            data: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12', '13', '14', '15', '16',
            '17', '18', '19','20','21','22','23']
        },
        yAxis: {},
        series: [
        {
            data: {{dataList4}},
            type: 'line',
            smooth: true
        }
        ]
        };
    // 使用刚指定的配置项和数据显示图表。
    myChart4.setOption(option);


<!--    var myChart = echarts.init(document.querySelector('.box2'));-->
<!--    var option = {-->
<!--        title: {-->
<!--            text: 'ECharts 入门示例'-->
<!--        },-->
<!--        tooltip: {},-->
<!--        legend: {-->
<!--            data: ['销量']-->
<!--        },-->
<!--        xAxis: {-->
<!--            data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']-->
<!--        },-->
<!--        yAxis: {},-->
<!--        series: [-->
<!--            {-->
<!--                name: '销量',-->
<!--                type: 'bar',-->
<!--                data: [5, 20, 36, 10, 10, 20]-->
<!--            }-->
<!--        ]-->
<!--    };-->

// <!--    // 使用刚指定的配置项和数据显示图表。-->
<!--    myChart.setOption(option);-->


    //---------------------------------------------------------------------------------------------
    $('.form_datetime').datetimepicker({
        format: 'yyyy-mm-dd hh:ii:ss',
        autoclose: true,
        /* minView: "month",  *///选择日期后，不会再跳转去选择时分秒
        language: 'zh-CN',
        dateFormat: 'yyyy-mm-dd',//日期显示格式
        timeFormat: 'HH:mm:ss',//时间显示格式
        todayBtn: 1,
        autoclose: 1,
        minView: 0,  //0表示可以选择小时、分钟   1只可以选择小时
        minuteStep: 1//分钟间隔1分钟
    });

    $(document).ready(function () {
        var trigger = $('.hamburger'),
            overlay = $('.overlay'),
            isClosed = false;
        trigger.click(function () {
            hamburger_cross();
        });
        function hamburger_cross() {
            if (isClosed == true) {
                overlay.hide();
                trigger.removeClass('is-open');
                trigger.addClass('is-closed');
                isClosed = false;
            } else {
                overlay.show();
                trigger.removeClass('is-closed');
                trigger.addClass('is-open');
                isClosed = true;
            }
        }
        $('[data-toggle="offcanvas"]').click(function () {
            $('#wrapper').toggleClass('toggled');
        });
    });



var myChart5 = echarts.init(document.querySelector('.box5'));
    var option = {
        xAxis: {
            data: {{month_day}}
        },
        yAxis: {},
        series: [
        {
            data: {{dataList5}},
            type: 'line',
            smooth: true
        }
        ]
        };
    // 使用刚指定的配置项和数据显示图表。
    myChart5.setOption(option);

 var myChart6 = echarts.init(document.querySelector('.box6'));
    var option = {
        xAxis: {
            data: {{month_day}}
        },
        yAxis: {},
        series: [
        {
            data: {{dataList6}},
            type: 'line',
            smooth: true
        }
        ]
        };
    // 使用刚指定的配置项和数据显示图表。
    myChart6.setOption(option);


  var myChart7 = echarts.init(document.querySelector('.box7'));
    var option = {
        xAxis: {
            data: {{month_day}}
        },
        yAxis: {},
        series: [
        {
            data: {{dataList7}},
            type: 'line',
            smooth: true
        }
        ]
        };
    // 使用刚指定的配置项和数据显示图表。
    myChart7.setOption(option);

  var myChart8 = echarts.init(document.querySelector('.box8'));
    var option = {
        xAxis: {
            data: {{month_day}}
        },
        yAxis: {},
        series: [
        {
            data: {{dataList8}},
            type: 'line',
            smooth: true
        }
        ]
        };
    // 使用刚指定的配置项和数据显示图表。
    myChart8.setOption(option);



</script>
 <script src="js/script.js"></script>
  <script type="module" src="https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.esm.js"></script>
  <script nomodule src="https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.js"></script>

  <script>
    const menuToggle = document.querySelector('.menuToggle'),
          sidebar = document.querySelector('.sidebar'),
          Menulist = document.querySelectorAll('.menu-list li')
    menuToggle.onclick = function(){
      menuToggle.classList.toggle('active')
      sidebar.classList.toggle('active')
    }

    function activeLink() {
      Menulist.forEach((item) =>
        item.classList.remove('active')
      )
      this.classList.add('active')
    }

    Menulist.forEach((item) =>
      item.addEventListener('click', activeLink)
    )
  </script>

  <script>
    const modal = document.getElementById('myModal');
    const invasionLink = document.querySelector('.menu-list li a[href="#record"]');
    const monitoringLink = document.querySelector('.menu-list li a[href="#gly-rt-monitor"]');
    const pedestrianImportLink = document.querySelector('.menu-list li a[href="#person-import"]');
    const infoManagerLink = document.querySelector('.menu-list li a[href="#info-manager"]');
    const setMonitorLink = document.querySelector('.menu-list li a[href="#set-monitor"]');
	const setvedioPageLink = document.querySelector('.menu-list li a[href="#vedioPage"]');

    modal.addEventListener('hidden.bs.modal', function () {
      invasionLink.parentElement.classList.add('active');
    });

    modal.querySelector('button[type="submit"]').addEventListener('click', function () {
      invasionLink.parentElement.classList.add('active');
    });
  </script>

</html>